<template>
    <div>
        <!-- 上面 -->
        <div class="butall">
            <el-button 
            type="primary" 
            icon="el-icon-folder-add" 
            @click="submitForm('ruleForm')"
            class="savebtn" 
            :disabled="dianji" >保存</el-button>
            <el-button 
            type="warning" 
            icon="el-icon-coin" 
            @click="submitForm('ruleForm')"
            class="paybtn">收费</el-button>
        </div>
        <!-- 下面 -->
        <div class="infoall">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item class="uname" label="患者姓名" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item class="cardid" label="患者卡号" prop="cardid">
                    <el-input v-model="ruleForm.cardid"></el-input>
                </el-form-item>
                <el-form-item class="uage" label="患者年龄" prop="uage">
                    <el-input v-model="ruleForm.uage"></el-input>
                </el-form-item>
                <el-form-item class="ubirth" label="出生日期" required>
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker type="date" v-model="ruleForm.date1"
                                style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item class="usex" label="患者性别" prop="usex">
                    <el-select v-model="ruleForm.usex">
                        <el-option label="男" value="man"></el-option>
                        <el-option label="女" value="woman"></el-option>
                        <el-option label="其他" value="else"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="uphone" label="手机号码" prop="uphone">
                    <el-input v-model="ruleForm.uphone"></el-input>
                </el-form-item>
                <el-form-item class="uid" label="证件号码" prop="uid">
                    <el-input v-model="ruleForm.uid"></el-input>
                </el-form-item>

            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        var validatephone = (rule, value, callback) => {
            if (value) {
                if (!/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value)) {
                    callback(new Error("请输入正确的电话号码！"));
                } else {
                    callback();
                }
            } else {
                callback()
            }

        }
        var validateage = (rule, value, callback) => {
            if (value.length != 18) {
                    callback(new Error("请输入正确的身份证号码！"));
            } else {
                callback()
            }
        }
        return {
            dianji:false,
            ruleForm: {
                name: '',//双向绑定一个对象属性
                uage:'',
                cardid: '',
                uphone: '',
                uid: '',
                usex: '',
                date1: ''
            },
            rules: {//对应属性的验证规则
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 2, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                uage: [
                    { required: true, message: '请输入年龄', trigger: 'blur' },
                    { type: 'string', message: '年龄必须为数字值', trigger: 'blur' }
                ],
                cardid: [
                    { required: false, message: '请输入卡号', trigger: 'blur' },
                    { min: 8, max: 12, message: '长度在 8 到 12 个字符', trigger: 'blur' }
                ],

                uphone: [
                    { validator: validatephone, trigger: 'blur' }
                ],
                uid: [
                    { required:true, validator: validateage, trigger: 'blur' }

                ],
                usex: [
                    { required: true, message: '请选择性别', trigger: 'change' }
                ],
                date1: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
            }
        };
    },
    methods: {
        outtable(){
            //导出文档
            this.$emit('majorouttable')
        },
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('保存成功');
            this.outtable()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    }
}
</script>

<style lang="less" scoped>
// 把当前组件样式变成局部样式
.butall {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 70px;
    padding: 0 20px;
    margin-bottom: 10px;

    .savebtn,
    .paybtn {
        width: 100px;
        height: 30px;
        padding: 0;
        font-weight: bold;
    }

    ;

    .savebtn {
        background-color: #666ee8!important;
        border-color: #666ee8;
        padding: 0 !important;
        font-size: 14px !important;
    }

    .paybtn {
        background-color: #ffc71c;
        border-color: #ffc71c;
    }
}

.infoall {
    // width: 100%;
    padding: 20px;
    padding-bottom: 0px;


    .demo-ruleForm {
        display: flex;
        justify-content: left;
        flex-wrap: wrap;
        overflow: hidden;

        .uname,
        .cardid,
        .uage,
        .ubirth,
        .usex,
        .uphone,
        .uid {
            width: 260px;

            .el-col-11 {
                width: 160px;
            }
        }
    }

}
</style>